<template>
  <div class="home">
    <my-header @add="add"></my-header>
    <my-list :toList="list" @del="del"></my-list>
  </div>
</template>

<script>
import MyHeader from '../components/myHeader.vue';
import MyList from '../components/myList.vue';
// @ is an alias to /src

export default {
  name: "Home",
  components: {MyHeader, MyList},
  data() {
    return {
      list: [], // 任务列表
      inputVal:''
    };
  },
  
  methods: {
    add(val) {
      // console.log(this.inputVal);
      // flag: false 代表正在进行 true 已完成
      // if () 如果 括号里面 值为 '',null,0 都会返回一个false 否则就返回一个true
      if (val) {
        let obj = { flag: false, msg: val };
        this.list.push(obj);
        
      } else {
        alert('输入内容不能为空');
      }

      // console.log(this.list);
    },
    del(i){
      this.list.splice(i,1);
    }
  },
};
</script>
<style lang="scss">
* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#app {
  width: 100%;
  height: 100%;
  background-color: #cdcdcd;
}



</style>